<template>
  <div class="container">
    <div v-if="isEnableNetdisk===1">
      <!-- 搜索项 -->
      <div class="search_bar">
        <el-form size="small" :inline="true" label-width="68px">
          <el-form-item label="姓名">
            <el-input
              v-model="sea_form.nickName"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="getdataBysearch"
            />
          </el-form-item>
          <el-form-item label="分院名称">
            <el-select
              placeholder="请选择"
              v-model="sea_form.branchId"
              filterable
              clearable
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="(item, index) in queryParams_branchs"
                :key="index"
                :label="item.branchName"
                :value="parseInt(item.branchId)"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="search_btns">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getdataBysearch"
            >搜索
            </el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!--   按钮组-->
      <div class="btns">
        <el-button type="primary" size="mini" @click="addperson()">新增</el-button>
        <el-button type="success" size="mini" :disabled="multipleSelection.length==0" @click="dispositionByid(2)">
          批量配置
        </el-button>
        <el-button type="danger" size="mini" :disabled="multipleSelection.length==0" @click="deleteByid()">批量删除
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="postList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="姓名"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="teacherNum"
          label="工号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="branchNames"
          label="分院名称"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.delFlag==2" style="color: #f56c6c">该账号已被删除</div>
            <div>{{ scope.row.branchNames }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalStorageSize"
          label="存储容量"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.totalStorageSize }}GB
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="使用情况"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <el-progress :show-text="false" :percentage="scope.row.storageUsage||0" :color="getColor(scope.row.storageUsage||0)"
            ></el-progress>
            <div class="progress_info">
              <div>{{ convertBytes(scope.row.storageSize) }}/{{ scope.row.totalStorageSize }}GB</div>
              <div>{{ scope.row.storageUsage }}%</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="dispositionByid(1,scope.row)">配置</el-button>
            <el-button size="mini" type="text" @click="deleteByid(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="sea_form.pageNum"
        :limit.sync="sea_form.pageSize"
        @pagination="getList"
      />
    </div>

    <Storedisposition ref="storedisposition"></Storedisposition>
    <!--    <div v-if="isEnableNetdisk!==1">该学校暂无开启资源库功能</div>-->
    <el-empty :description="`${tipText}`" v-if="isEnableNetdisk!==1"
              style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"
    ></el-empty>
  </div>
</template>
<script>
import Storedisposition from '@/views/resourceLibrary/component/storeDisposition.vue'
import { batchDeleteUserStorage, getLibrsryUserList, verifyUserDelete } from '@/api/library/librarySet'
import { listPost_branch } from '@/api/schoolOrganization/organization'
import { isEnableSchoolNetdisk } from '@/api/library_index'
import { convertBytes } from '@/views/library_homePage/utils/files.js'

export default {
  name: 'personAdmin',
  components: { Storedisposition },
  data() {
    return {
      loading: true,
      postList: [],
      sea_form: {
        pageNum: 1,
        pageSize: 20,
        branchId: '',
        nickName: ''
      },
      convertBytes: function(num) {
        return convertBytes(num)
      },
      branchList: [],
      total: 30,
      multipleSelection: [],
      //   分院列表
      queryParams_branchs: [],
      isEnableNetdisk: 1,
      tipText: '尚未开通资源库服务，如需使用，请联系管理员'
    }
  },
  mounted() {
    this.getLibraryStatus()

  },
  methods: {

    getColor(percentage) {
      if (percentage > 90 || percentage == 90) {
        return '#f56c6c'
      }
    },
    async getList() {
      this.loading = true
      let res = await getLibrsryUserList(this.sea_form)
      if (res.code == 200) {
        this.postList = res.rows
        this.total = res.total
      }
      this.loading = false
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取列表请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 20,
        schoolName: '',
        schoolLevel: ''
      }
      this.getdataBysearch()
    },
    // 配置
    dispositionByid(type, row) {
      if (type === 1) {
        let arr = [row]
        this.$refs.storedisposition.show('update', arr, type)
      } else {
        this.$refs.storedisposition.show('update', this.multipleSelection, type)
      }

    },
    // 删除
    deleteByid(row) {
      if (row) {
        let arr = []
        arr.push(row.userId)
        this.deleteUserPre(arr)
      } else {
        this.deleteUserPre(this.multipleSelection.map(item => item.userId))
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addperson() {
      this.$refs.storedisposition.show('add', 'person')
    },
    // 删除前置判断
    async deleteUserPre(ids) {
      let res = await verifyUserDelete({ userIds: ids })
      if (res.code == 200) {
        this.$confirm(`${res.data.isExist ? `选择的${ids.length > 1 ? `账号中${res.data.userNum}个账号的` : ''}资源库中仍有文件存在，删除后不可恢复，确定删除吗？` : `确定删除所选择账号的资源库吗？删除后不可恢复？`}`, '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.deleteUserSeting(ids)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      }
    },
    async deleteUserSeting(ids) {
      let res = await batchDeleteUserStorage({ userIds: ids })
      if (res.code == 200 && res.data.status == 1) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      } else {
        this.$message({
          type: 'info',
          message: res.data.msg
        })
      }
    },
    getBranch() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((response) => {
        this.queryParams_branchs = response.rows
        this.form_branchs = response.rows
      })
    },
    // 获取当前学校资源库状态
    async getLibraryStatus() {
      let res = await isEnableSchoolNetdisk()
      if (res.code == 200) {
        this.isEnableNetdisk = res.data
        if (this.isEnableNetdisk == 2) {
          this.tipText = '尚未开通资源库服务，如需使用，请联系管理员'
        } else if (this.isEnableNetdisk == 4) {
          this.tipText = '资源库服务已到期，如需继续使用，请联系管理员'
        } else if (this.isEnableNetdisk == 3) {
          this.tipText = '资源库服务已停用，如需继续使用，请联系管理员'
        }
        if (this.isEnableNetdisk === 1) {
          this.getList()
          this.getBranch()
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
::v-deep .el-button--success {
  background-color: #5a9cf8;
  border: 1px solid #5a9cf8;
}

::v-deep .el-button--success.is-disabled {
  background-color: #aacefb;
  border: 1px solid #aacefb;
}

.container {
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 84px);

  .search_bar {
    padding: 20px 20px 0 20px;
    background-color: #fafafa;

    .search_btns {
      float: right;
    }
  }

  .btns {
    margin: 20px 0;
  }

  .greenFont {
    margin-right: 20px;
    color: #5a9cf8;
    font-size: 12px;
  }

  .redFont {
    color: #e47470;
    font-size: 12px;
  }

  .progress_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
